import styles from './index.less';
import ReactWOW from 'react-wow';
import '@/assets/styles/main.less';
import { Carousel, Row, Col } from 'antd';
import { useScroll } from 'ahooks';
import { useRef, useState } from 'react';

let col = { sm: 24, md: 24, lg: 12, xl: 12, xxl: 12 },
  cols = { sm: 12, md: 12, lg: 12, xl: 6, xxl: 6 };
export default function IndexPage({ scroll }: any) {
  const contentStyle = {
    height: '80vh',
    color: '#fff',
    textAlign: 'center',
    overflow: 'hidden',
    position: 'relative',
  };

  return (
    <div>
      <Carousel>
        <div>
          <div
            style={{
              ...contentStyle,
            }}
            className="center"
          >
            <div
              className={styles.imgcon}
              style={{
                backgroundImage: `url(${require('@/assets/images/banner1.png')})`,
                transform: `translate3d(0px, ${scroll?.y / -5}px, 0px)`,
              }}
            ></div>
            <div
              className="container"
              style={{
                position: 'absolute',
                left: 0,
                right: 0,
                margin: 'auto',
                padding: 6,
                top: '30vh',
              }}
            >
              <ReactWOW animation="slideInRight" delay="0.5s">
                <div
                  className={styles.textcon}
                  style={{
                    transform: `translate3d(0px, ${scroll?.y / 10}px, 0px)`,
                  }}
                >
                  <h2>智能装备未来</h2>
                  <p>BLOCK CHAIN EXPERT</p>
                  <p style={{ textAlign: 'left' }}>
                    数据流动、数据分析与数据存储将不可阻挡的形成跨域趋势
                    <br />
                    TEMPLATE致力于打造基于EOS互联网3.0数据与应用
                  </p>
                  <div>联系我们</div>
                </div>
              </ReactWOW>
            </div>
          </div>
        </div>

        <div>
          <div
            style={{
              ...contentStyle,
            }}
            className="center"
          >
            <div
              className={styles.imgcon}
              style={{
                backgroundImage: `url(${require('@/assets/images/banner2.png')})`,
                transform: `translate3d(0px, ${scroll?.y / -5}px, 0px)`,
              }}
            ></div>
            <div
              className="container"
              style={{
                position: 'absolute',
                left: 0,
                right: 0,
                margin: 'auto',
                padding: 6,
                top: '29.5vh',
              }}
            >
              <ReactWOW animation="fadeIn" delay="0.5s">
                <div
                  className={styles.textcon}
                  style={{
                    transform: `translate3d(0px, ${scroll?.y / 10}px, 0px)`,
                  }}
                >
                  <h2>智能制造未来</h2>
                  <p>BLOCK CHAIN EXPERT</p>
                  <p style={{ textAlign: 'left' }}>
                    数据流动、数据分析与数据存储将不可阻挡的形成跨域趋势
                    <br />
                    TEMPLATE致力于打造基于EOS互联网3.0数据与应用
                  </p>
                  <div>联系我们</div>
                </div>
              </ReactWOW>
            </div>
          </div>
        </div>
      </Carousel>

      <div className={styles.introduce}>
        <div className="container">
          <Row>
            <ReactWOW animation="slideInLeft" delay="1s">
              <Col {...col}>
                <div className={styles.leftintro}>
                  <h3 style={{ margin: 0 }}>关于我们</h3>
                  <span style={{}}>ABOUT US</span>
                  <h2>欢迎访问江苏南高智能装备创新中心</h2>
                  <p style={{ textIndent: 24 }}>
                    江苏南高智能装备创新中心有限公司是由东南大学牵头，联合地方政府和省内高档数控机床及成套装备行业的数家龙头企业共同创立的专注于数控机床及成套装备领域的高技术企业。
                    <br />
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;江苏南高是江苏省高档数控机床及成套装备创新中心的运营主体。创新中心与省内高档数控机床及成套装备行业的企业、高校和科研院所进行合作，开展智能装备领域共性技术的研究，进行智能装备技术的投资孵化，提供装备智能化设计与制造、工业大数据分析、第三方测试服务认证、行业高端人才培训等技术服务。
                    <br />
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;江苏南高是国家高新技术企业、江苏省双软企业、江苏省民营科技企业、企业研究生工作站，现已通过两化融合标准化认证、知识产权管理体系认证、ISO质量环境职业健康安全管理体系认证。江苏南高自主申请知识产权逾100项，其中发明专利65个。技术研究团队人数占员工总数87%。
                    <br />
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;公司建立了数据融合与质量科学、AI与智能装备创意设计、机床结构动态优化创新设计及数字化、智能化设计与制造等共性技术研发平台，拥有工业互联网平台、设备互联互通、设备大数据及机器视觉等核心技术。公司主持了多个省、部级项目，累计项目经费1.7亿元。
                    <br />
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;江苏南高是“江苏省智能装备产业联盟”、“南京智能制造装备产业促进会”的秘书长单位。江苏省智能装备产业联盟和南京智能制造装备产业促进会充分整合政、产、学、研资源，搭建产业上下游合作平台、政企交流平台、产学研研发平台，服务会员，促进企业合作，在促进产业发展、加快科技成果转化、推动企业技术交流等方面发挥桥梁和纽带作用。
                  </p>
                </div>
              </Col>
            </ReactWOW>
            <ReactWOW animation="slideInRight" delay="1s">
              <Col {...col} style={{ position: 'relative' }}>
                <div
                  className="img template1"
                  style={{
                    backgroundImage: `url(${require('@/assets/images/template.jpg')})`,
                  }}
                ></div>
                <div
                  className="img template"
                  style={{
                    backgroundImage: `url(${require('@/assets/images/template1.jpg')})`,
                  }}
                ></div>
                <img
                  src={require('@/assets/images/template.jpg')}
                  style={{ height: 440, opacity: 0 }}
                  alt=""
                />
              </Col>
            </ReactWOW>
          </Row>
        </div>
      </div>

      <div
        className={styles.service}
        style={{
          backgroundImage: `url(${require('@/assets/images/servicebac.png')})`,
          backgroundPositionX: 'center',
          backgroundPositionY: (scroll.y - 2000) / 2,
        }}
      >
        <div className="container">
          <div className={styles.title}>
            <h3 style={{ margin: 0 }}>服务范围</h3>
            <span style={{}}>SERVICE</span>
          </div>
          <Row gutter={24} style={{ marginTop: 48 }}>
            {[
              {
                title: `大数据中心`,
                content: `全域、跨链的共享数据流，任何人与数据源的 相关数据都可以贡献和流转。`,
              },
              {
                title: `分布式存储`,
                content: `高性能的数据处理和分析引擎以分布式的方式执行存储，提供可视化便捷的自设分析。`,
              },
              {
                title: `数据应用平台`,
                content: `数据应用平台构成一个可用性层和工具箱，使数据上链与大数据互联网转型快速发展。`,
              },
              {
                title: `大数据平台`,
                content: `TEM生态架构以链接不同来源的元数据为核心，打造数据模型服务多种业态。`,
              },
            ].map((it: any, i: number) => {
              return (
                <Col {...cols} key={i}>
                  <div className={styles.serviceitem}>
                    <div
                      className="img"
                      style={{
                        backgroundImage: `url(${require(`@/assets/images/service${
                          i + 1
                        }.png`)})`,
                        width: 110,
                        height: 110,
                        backgroundSize: 'contain',
                      }}
                    ></div>

                    <h2>{it.title}</h2>
                    <p>{it.content}</p>
                  </div>
                </Col>
              );
            })}
          </Row>
        </div>
      </div>

      <div className={styles.zz}>
        <div className={styles.title}>
          <h3 style={{ margin: 0 }}>企业资质</h3>
          <span style={{}}>SERVICE</span>
        </div>
        <div className="container">
          <div className="center" style={{ flexWrap: 'wrap', marginTop: 24 }}>
            <img
              style={{ width: '25%' }}
              src="http://www.jsnangao.com/nangaoyunwebsite/static/common/pic/home/honor1.png"
              alt=""
            />
            <img
              style={{ width: '25%' }}
              src="http://www.jsnangao.com/nangaoyunwebsite/static/common/pic/home/honor2.png"
              alt=""
            />
            <img
              style={{ width: '25%' }}
              src="http://www.jsnangao.com/nangaoyunwebsite/static/common/pic/home/honor3.png"
              alt=""
            />
            <img
              style={{ width: '25%' }}
              src="http://www.jsnangao.com/nangaoyunwebsite/static/common/pic/home/honor4.png"
              alt=""
            />

            <img
              style={{ width: '25%' }}
              src="http://www.jsnangao.com/nangaoyunwebsite/static/common/pic/home/honor1.png"
              alt=""
            />
            <img
              style={{ width: '25%' }}
              src="http://www.jsnangao.com/nangaoyunwebsite/static/common/pic/home/honor2.png"
              alt=""
            />
            <img
              style={{ width: '25%' }}
              src="http://www.jsnangao.com/nangaoyunwebsite/static/common/pic/home/honor3.png"
              alt=""
            />
            <img
              style={{ width: '25%' }}
              src="http://www.jsnangao.com/nangaoyunwebsite/static/common/pic/home/honor4.png"
              alt=""
            />
          </div>
          <a style={{ float: 'right', marginTop: 12 }} onClick={() => {}}>
            查看全部
          </a>
        </div>
      </div>
    </div>
  );
}
